import { Button, Form, Input,Select ,Modal} from 'antd';
import axios from 'axios';
import React,{ useState } from 'react';
import { nanoid } from 'nanoid'
import {useNavigate,Link} from 'react-router-dom'
import {RegisterRouter} from '../../api' 

const Register = () => {  
  const [modalVisible,setModalVisible]=useState(false)
  const { Option } = Select;
  const  navigate=useNavigate();
  React.useEffect(()=>{
    if(localStorage.getItem('login-user')){
      navigate(`/home`,{
        state:{
          u_acc:localStorage.getItem('login-user')
        }
      })
    }
  },[])//eslint-disable-line
  const onFinish = (values) => {
    axios({
      url:RegisterRouter,
      method:'post',
      data: {...values,salt:nanoid(4),name:`user${values.account.slice(values.account.length-4,values.account.length)}`}
    }).then(res=>{
      // console.log(res.data.value);
      return res.data.message;
    }).then(res=>{
      if(res==='注册成功'){
          setModalVisible(true)
      }
    })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const handleOK=()=>{
    setModalVisible(false)
       navigate('/login',{
          replace:false,
      })
  }

  return (
    <div className='loginContainer'>
    <Form
      className='loginform'
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 8,
      }}
      
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Modal
        title="提示"
        centered
        width="80vw"
        visible={modalVisible}
        onCancel={handleOK}
        footer={  <Button  type="primary" onClick={handleOK}>
        去登录
      </Button>}
      >
        <p>注册成功</p>
      </Modal>
      <Form.Item
        label="Account"
        name="account"
        rules={[
          {
            required: true,
            message: '账号不能为空',
          },
          {
            max:11,
            message:'账号必须小于11位'
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: '密码不能为空',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        label="Confirm"
        name="confirm"
        rules={[
          {
            required: true,
            message: '输入确认密码!',

          },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次密码不一致!'));
              },
            })
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        label="gender"
        name="gender"
      >
        <Select
          defaultValue="male"
        >
          <Option value="female">靓妹</Option>
          <Option value="male">靓仔</Option>
          <Option value="other">保密</Option>
        </Select>
      </Form.Item>
      <Form.Item
        wrapperCol={{

          span: 8,
        }}
      >
        <Button type="primary" htmlType="submit" block>
          注册
        </Button>
  
      </Form.Item>
      <Form.Item
        wrapperCol={{

          span: 8,
        }}
    >
        <Link to="/login">
        <Button type="primary" block>
          我有账号</Button>
          </Link>
      </Form.Item>
    </Form>
    </div>
  );
};
export default Register;